<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <div id="demo">
      <input type="text" name="" id="" v-model="searchName">
      <ul>
        <li v-for="(item,index) in filterPersons" :key="item.id">
          {{index+1}}-{{item.id}}-{{item.name}}-{{item.age}}
        </li>
      </ul>
      <button @click="sortType=1">按年龄升序</button>
      <button @click="sortType=2">按年龄降序</button>
      <button @click="sortType=0">原顺序</button>
    </div>
  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el:"#demo",
      data:{
        searchName:'', 
        sortType:0,
        persons:[
          {id:1,name:'Tony', age:12},
          {id:2,name:'Tom', age:17},
          {id:3,name:'Jacklove', age:18},
          {id:4,name:'Lwx', age:13},
          {id:5,name:'Doinb', age:20},
          {id:6,name:'Crisp', age:17},
          {id:7,name:'Light', age:10},
        ]
      },
      computed:{
        filterPersons(){
          const  {persons,searchName,sortType} =this
          const arr = persons.filter(p=>{
            return p.name.includes(searchName)
          })
          if(sortType!==0){
            arr.sort((item1,item2)=>{
              if(sortType === 1){
                return item1.age-item2.age
              }else{
                return item2.age-item1.age
              }
            })
          }

         return arr
        }
       }
    })
  </script>
</body>
</html>